<template lang="pug">
div
  nav-div
    .item(slot="search")
      search-input(
        :keyword.sync="keyword",
        :load="loadFn",
      )
  table.ui.table(v-infinite-scroll="load()", infinite-scroll-disabled="busy", infinite-scroll-distance="50")
    thead
      tr
        th ID
        th 用户名
        th 创建时间
    tbody
      tr(v-for="user in users | orderBy 'id' -1", track-by="$index")
        td
          a(v-link="{ name: 'user', params: { id: user.id } }", target="_blank") {{user.id}}
        td {{user.name}}
        td {{user.created_at|unixToDate 'YYYY-MM-DD hh:mm'}}
  .ui.active.centered.inline.loader(v-if="isLoading")
</template>

<script>
import NavDiv from '../../modules/nav'
import SearchInput from '../../modules/semantic/search'
import { getUsers } from '../../vuex/action'

export default {
  name: 'users',
  components: {
    SearchInput,
    NavDiv,
  },
  vuex: {
    getters: {
      users: ({ user }) => user.users,
    },
    actions: {
      getUsers,
    }
  },
  data() {
    return {
      keyword: null,
      busy: false,
      page: 1,
      isLoading: false,
    }
  },
  ready() {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
    this.load()
  },
  methods: {
    loadFn() {
      this.$el.scrollTop = 0
      this.page = 1
      this.busy = false
      this.load()
    },
    load() {
      catchError(async() => {
        this.busy = true
        this.isLoading = true
        const result = await this.getUsers({
          page: this.page,
          q: this.keyword,
        })
        if (!_.isEmpty(result)) {
          this.page++
            this.busy = false
          this.isLoading = true
        } else {
          this.isLoading = false
        }
      })
    },
  },
}
</script>

<style lang="sass" scoped>

</style>
